<template>
	<div class="setting-account-wrap">
		<div class="model-content">
			<div class="model-content-table">
				<!--搜索条件-->
				<div class="model-content-seach">
					<el-form size="mini" :inline="true">
						<el-form-item>
							<el-button type="primary" size="small" @click="addCount">添加账号</el-button>
						</el-form-item>
					</el-form>
				</div>

				<!--表格-->
				<el-table :data="tableData" v-loading="loading" border style="width: 100%">
					<el-table-column label="用户名" prop='name' align="center">
					</el-table-column>
					<el-table-column label="手机号" prop='mobile' align="center">
					</el-table-column>
					<el-table-column label="状态" prop="status" align="center">
						<template slot-scope="scope">
							{{ scope.row.status === 10 ? '正常' : '禁用' }}
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
							<el-button type="text" size="small" v-if="scope.row.status === 1" @click="prohibit(scope.row.id, 2)">停用</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页-->
			<div class="model-footer">
				<el-pagination @current-change="handleCurrentChange" :current-page="page.current_page" :page-size="page.per_page"
				layout="total, prev, pager, next, jumper" :total="page.total">
				</el-pagination>
			</div>
			
			
			
		</div>

		<!--添加账号，编辑账号-->
		<el-dialog :title="accountFormData.id ? '编辑账号' : '添加账号'" :visible.sync="dialogVisible" width="400px">

			<el-form :model="accountFormData" :rules="rules" ref="ruleForm" label-width="100px">
				<el-form-item label="姓名：" prop="admin_name">
					<el-input size="small" v-model="accountFormData.admin_name" clearable></el-input>
				</el-form-item>
				<el-form-item label="手机号：" prop="mobile">
					<el-input size="small" v-model="accountFormData.mobile" clearable></el-input>
				</el-form-item>
				<el-form-item label="登录密码：" prop="password" v-if="!accountFormData.id">
					<el-input size="small" v-model="accountFormData.password" clearable></el-input>
				</el-form-item>
				<el-form-item label="登录密码：" prop="againPassword" v-else>
					<el-input style="width: 76%;margin-right: 10px;" size="small" v-model="accountFormData.againPassword" :disabled="!passwordChecked" clearable></el-input>
					<el-checkbox v-model="passwordChecked">重置</el-checkbox>
				</el-form-item>
				<el-form-item label="状态：" >
					<el-switch
					v-model="accountFormData.status"
					active-color="#13ce66"
					inactive-color="#ff4949">
					</el-switch>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmAccount">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import { ACCOUNT } from '@/api/setting'
	import { checkPhone } from '@/tool/validate'

	export default {
		data() {

			const mobileValidate = (rule, value, callback) => {
				if(!checkPhone(value)) {
					callback(new Error('请输入正确手机号'));
				}

				callback()
			}

			return {
				formData: {
					admin_name: "",
					mobile: ""
				},
				loading: false,
				tableData: [],
				page: {},
				dialogVisible: false,
				bthLoading: false,
				roleList: [],
				accountFormData: {
					id: '',
					admin_name: '',
					mobile: '',
					password: '',
					againPassword: '',
					status: true
				},
				passwordChecked: false,
				rules: {
					admin_name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'change'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: 'change'
						},
						{
							validator: mobileValidate,
							trigger: 'change'
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}],
					againPassword: [{
						required: false,
						message: '请输入密码',
						trigger: 'change'
					}]
				},
			};
		},
		watch: {
			$route() {
				this.initPageQuery()
			},
			passwordChecked(val) { //重置
				if(val) {

					this.rules.againPassword = [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				} else {
					this.rules.againPassword = [{
						required: false,
						message: '请输入密码',
						trigger: 'change'
					}]
					this.accountFormData.againPassword = ''
				}
			}
		},
		mounted() {
			this.initPageQuery()
		},
		methods: {
			addCount() { //增加账号
				this.accountFormData = {
					id: '',
					admin_name: '',
					mobile: '',
					password: ''
				}
				if(this.$refs['ruleForm']) {
					this.$refs['ruleForm'].resetFields()
				}

				this.dialogVisible = true
			},
			edit(row) {

				const {
					id,
					name,
					mobile,
					status
				} = row

				this.$nextTick(() => {
					if(this.$refs['ruleForm']) {
						this.$refs['ruleForm'].resetFields()
					}

					this.passwordChecked = false
					this.accountFormData = {
						id,
						admin_name: name,
						mobile,
						status: status === 10 ? true : false
					}

				})

				this.dialogVisible = true
			},
			handleCurrentChange(page) {
				this.$routePlugin.addQuery({
					page
				});
			},
			searchRequest(options) {
				const {
					page
				} = options
				let params = {}
				params['page'] = page || 1
			
				this.initPageData(params)
			},
			initPageQuery() {
				const {
					page
				} = this.$route.query
				this.searchRequest({
					page
				})
			},
			initPageData(params) {
				this.loading = true
				this.$http.get(ACCOUNT, {
					params
				}).then(res => {
					this.loading = false
					const {
						data,
						meta
					} = res.data
					
					console.log(res.data, 55)
					this.tableData = data;
					this.page = meta
				})
			},
			confirmAccount() { //账号处理
				this.$refs['ruleForm'].validate((valid) => {
					if(valid) {
						if(!this.accountFormData.id) {
							this.addAccount()
						} else {
							this.editAccount()
						}
					}
				})
			},
			addAccount() {

				if(this.bthLoading) {
					return
				}

				this.bthLoading = true

				const {
					admin_name,
					mobile,
					password
				} = this.accountFormData

				let params = {}
				params['name'] = admin_name
				params['mobile'] = mobile
				params['password'] = password

				this.$http.post(ACCOUNT, params)
					.then(() => {

						this.$message({
							type: 'success',
							message: '添加成功'
						})

						this.dialogVisible = false
						this.bthLoading = false
						this.initPageQuery()
					})
					.catch(() => {
						this.bthLoading = false
					})
			},
			editAccount() { //编辑账号
				if(this.bthLoading) {
					return
				}

				this.bthLoading = true

				const {
					id,
					admin_name,
					mobile,
					againPassword,
					status
				} = this.accountFormData

				let params = {}
				params['id'] = id
				params['name'] = admin_name
				params['mobile'] = mobile
				againPassword ? params['password'] = againPassword : '',
				params['status'] =  status ? 10 : 20

				this.$http.put(`${ACCOUNT}/${id}`, params)
					.then(() => {

						this.$message({
							type: 'success',
							message: '编辑成功'
						})

						this.dialogVisible = false
						this.bthLoading = false
						this.initPageQuery()
					})
					.catch(() => {
						this.bthLoading = false
					})
			},
			confirmPassword() { //重置密码确定
				this.$refs['passwordRuleForm'].validate((valid) => {
					if(valid) {
						this.resetPasswordAjax()
					}
				})
			},
			resetPasswordAjax() {
				if(this.bthLoading) {
					return
				}

				this.bthLoading = true

				const {
					id,
					password
				} = this.passwordFormData

				let params = {}
				params['id'] = id
				params['password'] = password

				this.$http.put(`${ACCOUNT}/${id}`, params)
					.then(() => {

						this.$message({
							type: 'success',
							message: '重置成功'
						})

						this.dialogPasswordVisible = false
						this.bthLoading = false
						this.initPageQuery()
					})
					.catch(() => {
						this.bthLoading = false
					})
			}
		}
	};
</script>

<style lang="scss">
	.setting-account-wrap {}
</style>